<div style="margin-top:45px;" v-if="status">

	<!-- 图标 -->
	<a-alert v-if="!status.connect"
		message="警告"
		description="屏幕掉线啦！！！"
		type="warning"
		showIcon
	></a-alert>

	<a-card v-if="status.data">
		<p style="font-size:48px;text-align:center;margin-bottom:20px">
			<span>
				<a-icon type="close" v-if="!status.data.playing"></a-icon>
				<a-icon type="caret-right" v-else-if="!status.data.pause"
					style="color:rgb(63,134,0);"></a-icon>
				<a-icon type="pause" v-else style="color:rgb(207,19,34);"></a-icon>
				&emsp;&emsp;{{timerText}}
			</span>
		</p>
		<i>上面为上次同步时间：{{status.instant}} ，真实时间请参照展示屏</i>
	</a-card>

	<a-row v-if="status" style="margin-top:12px;padding-left:60px;">
		<a-button type="primary" @click="timerStart()"    >开始</a-button>
		<a-button                @click="timerPause()"    >暂停</a-button>
		<a-button type="danger"  @click="timerStop()"     >结束</a-button>
		<a-button                @click="timerReset()"    >重置</a-button>
		<a-button                @click="timerUndoPause()">撤销暂停</a-button>
	</a-row>

	<a-row v-if="status" style="margin-top:30px;">
		<a-col :span="12">
			<a-card :title="'左边 ' + status.data.p1Name" style="margin:20px;">
				<a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
					<a-form-item label="名字">
						<a-input-search v-model.trim="editP1Name" placeholder="左边的名字" @search="editPlayerNameSubmit(1)">
							<a-button slot="enterButton">修改</a-button>
						</a-input-search>
					</a-form-item>
					<a-form-item label="成绩" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
						<span>{{p1Score}}</span>
					</a-form-item>
					<a-form-item label="计时" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
						<a-button-group>
							<a-button type="primary" @click="playerRecord(1)">计次</a-button>
							<a-button @click="playerUndoRecord(1)">撤销</a-button>
						</a-button-group>
					</a-form-item>
				</a-form>
			</a-card>
		</a-col>
		<a-col :span="12">
			<a-card :title="'右边 ' + status.data.p2Name" style="margin:20px;">
				<a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
					<a-form-item label="名字">
						<a-input-search v-model.trim="editP2Name" placeholder="右边的名字" @search="editPlayerNameSubmit(2)">
							<a-button slot="enterButton">修改</a-button>
						</a-input-search>
					</a-form-item>
					<a-form-item label="成绩" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
						<span>{{p2Score}}</span>
					</a-form-item>
					<a-form-item label="计时" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
						<a-button-group>
							<a-button type="primary" @click="playerRecord(2)">计次</a-button>
							<a-button @click="playerUndoRecord(2)">撤销</a-button>
						</a-button-group>
					</a-form-item>
				</a-form>
			</a-card>
		</a-col>
	</a-row>
</div>
<div v-else>
	空
</div>
